<template>
    <h1>欢迎{{user.data.name}}登陆成功</h1>
    <div>
        <h1>显示列表</h1>
        会员名称
        <input type="text" v-model="datalist.uname">
        会员等级Id
                    
        <select  v-model="datalist.xlk">
                <option value="0">请选择</option>
                <option v-for="a in xlk" :value="a.DId">{{ a.DName }}</option>
        </select>            
        性别
        <select  v-model="datalist.xb">
                <option value="0">请选择</option>
                <option value="1">男</option>
                <option value="2">女</option>
        </select>
                
        <input type="button" value="查询" @click="getdata">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="info" @click="info1">
                    </td>
                    <td>会员id</td>
                    <td>会员名称</td>
                    <td>会员性别</td>
                    <td>爱好数量</td>
                    <td>会员爱好</td>
                    <td>图片</td>
                    <td>会员等级Id</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>
                        <input type="checkbox" v-model="pishan" :value="a.HId" @click="pishan1">
                    </td>
                    <td>{{a.HId}}</td>
                    <td>{{a.Name}}</td>
                    <td>{{a.Sex==1?"男":"女"}}</td>
                    <td>{{a.Lovecount}}</td>
                    <td>{{a.Love}}</td>
                    <td>
                        <img :src="'https://localhost:7076/'+a.img" style="width: 100px;height: 100px;">
                    </td>
                    <td>{{a.DName}}</td>
                    <td>
                        <input type="button" value="编辑" @click="gai(a.HId)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="批量逻辑删除" @click="ps">
        <input type="button" value="首页" @click="fanye(1)">
        <input type="button" value="上一页" @click="fanye(2)">

        <input v-for="c in datazong.zongye" type="button" :value="c" @click="zhiding(c)">

        <input type="button" value="下一页" @click="fanye(3)">
        <input type="button" value="尾页" @click="fanye(4)">
    </div>
    当前第{{datalist.pagindex}}页，每页{{datalist.pagsize}}条，一共{{datazong.zongye}}页，一共{{datazong.zongtiao}}条
    <select v-model="datalist.pagsize" @click="tiao">
        <option :value="2">2</option>
        <option :value="3">3</option>
        <option :value="4">4</option>
        <option :value="5">5</option>
    </select>
    <input type="number" v-model="zhuan" @change="jue(zhuan)" style="width: 50px;">
    <br>
    <input type="button" value="退出" @click="tui">
    <br>
    <a href="/add">添加</a>
    <br>
    <a href="/Login">登录</a>
</template>
<script setup lang="ts">
import {ref,onMounted, toDisplayString} from "vue";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
import { useuserStore } from "@/stores/user";
const user=useuserStore();
const route=useRoute();
const getPinia=()=>{
    if(user.data.name=="")
    {
        alert("您没有登陆，请回去登陆一下吧");
        router.push({path:"/Login"});
    }
}
const xlk=ref([
{
    "DId": 0,
    "DName": ""
  }
]);
const bang=()=>{
    axios.get("https://localhost:7076/api/Hui/Bang").then(res=>{
        xlk.value=res.data;
    })
}
//全选全取消
const info=ref(false);
const info1=()=>{
    if(!info.value)
    {
        data.value.forEach(e=>{
            pishan.value.push(e.HId);
        })
    }
    else
    {
        pishan.value=[];
    }
}
const pishan=ref([]);
const ps=()=>{
    if(pishan.value.length==0)
    {
        alert("请选择要删除的数据");
        return;
    }
    if(!confirm("您确定要删除吗？"))
    {
        return;
    }
    axios.delete("https://localhost:7076/api/Hui/Piliangluo",{params:{ids:pishan.value.toString()}}).then(res=>{
        if(res.data>0)
        {
            alert("批量逻辑删除成功");
            getdata();
        }
        else
        {
            alert("批量逻辑删除失败");

        }

    })
}
const tui=()=>{
    user.data.name="";
    router.push({path:"/Login"});
}
//编辑
const gai=(val:any)=>{
    router.push({path:"/xg",query:{id:val}})
}
//实例化
const router=useRouter();
const data=ref(
[{
      "HId": 0,
      "Sex": 0,
      "Name": "",
      "Love": "",
      "Lovecount": 0,
      "img": "",
      "Password": "",
      "IsDelete": true,
      "MemberLevelId": 0,
      "CreateData": "2025-04-10T11:44:33.555",
      "DId": 0,
      "DName": ""
    }]
);
//条件Model
const datalist=ref({
    uname:"",
    xlk:0,
    xb:0,
    pagindex:1,
    pagsize:3
});
const zhiding=(val:any)=>{
   datalist.value.pagindex=val;
    getdata();
    
}
const zhuan=ref<number>();
const jue=(val:any)=>{
    if(val>=1 && val<=datazong.value.zongye)
    {
        datalist.value.pagindex=val;
        getdata()
    }
}
const tiao=(e:any)=>{
    getdata();
}
//翻页
const fanye=(val:any)=>{
    if(val==1)
    {
        datalist.value.pagindex=1
        getdata();
    }
    if(val==2)
    {
        if(datalist.value.pagindex>1)
        {
            datalist.value.pagindex -=1;
            getdata()
        }
    }
    if(val==3)
    {
        if(datalist.value.pagindex<datazong.value.zongye)
        {
            datalist.value.pagindex +=1;
            getdata()
        }
    }
    if(val==4)
    {
        datalist.value.pagindex=datazong.value.zongye
        getdata();
    }
}
onMounted(()=>{
    getPinia();
    getdata();
    bang();
})
//总Model
const datazong=ref({
    zongtiao:0,
    zongye:0
});
const tan=()=>{
    alert(datazong.value.zongye);
}
const getdata=()=>{
    axios.get("https://localhost:7076/api/Hui/ShowHui",{params:datalist.value}).then(res=>{
        data.value=res.data.list;
        //计算总条数
        datazong.value.zongtiao=res.data.data;
        //计算总页数
        datazong.value.zongye=Math.ceil(datazong.value.zongtiao/datalist.value.pagsize)
    })
}













</script>

<style scoped>

</style>